<template>
  <div id="CoureCourse"></div>
</template>

<script>
import * as echarts from "echarts/core";
import { TooltipComponent, GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import pubsub from "pubsub-js";

export default {
  name: "CoureCourse",
  data() {
    return {
      stuId: "",
      CoureCourseData: [],
      CoureCoursePoint: [],
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      this.stuId = data;
      this.getInfo()
    });
    this.pubId = pubsub.subscribe("selectStuInfoScope", (msgName, data) => {
      this.stuId = data;
      this.getInfo()
    });
  },
  methods: {
    getInfo() {
      this.CoureCourseData = [];
      this.CoureCoursePoint = [];
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/stucourse/list/${this.stuId}/1`),
        method: "get",
      }).then((response) => {
        for (let index in response.data.data) {
          this.CoureCourseData.push(
            response.data.data[index].courseName
          );
          this.CoureCoursePoint.push(
            response.data.data[index].compsScore
          );
        }
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

      var chartDom = document.getElementById("CoureCourse");
      var myChart = echarts.init(chartDom);
      var option;

      let CoureCourseData = this.CoureCourseData;

      let CoureCoursePoint = this.CoureCoursePoint;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          left: "0%",
          right: "15%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          splitLine: {
            show: true, // 不显示网格线
          },
          textStyle:{
            color:"#fff"
          },
        },
        yAxis: {
          // inverse: true,
          axisTick: {
            show: false, // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisLabel: {
            show: true, // 不显示坐标轴上的文字
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // fontSize: 19, // 设置标签文本字体大小
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
          type: "category",
          data: CoureCourseData,
        },
        series: [
          {
            type: "bar",
            barWidth: 15, // 柱子宽度
            label: {
              show: true,
              position: "right", // 位置
              color: "#FFAA00",
              fontSize: 14,
              distance: 10, // 距离
              formatter: "{c}分", // 这里是数据展示的时候显示的数据
            },
            // 柱子上方的数值
            data: CoureCoursePoint,
            textStyle:{
              color:"#fff"
            },
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20],
                // barBorderRadius: 0,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(68, 143, 255,0)", //  0%  处的颜色quanmei
                    },
                    {
                      offset: 0.294,
                      color: "rgba(68, 143, 255,0.7)", //  100%  处的颜色quanmei
                    },
                    {
                      offset: 1,
                      color: "#00BEFF", //  100%  处的颜色quanmei
                    },
                  ],
                  global: false, //  缺省为  false quanmei
                },
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },

  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style>
#CoureCourse {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  /* background-color: aqua; */
}
</style>
